<template>
  <div class="detail">
    <van-nav-bar
      :title="product.name"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <img
      :src="product.coverImage | dalImg"
      :alt="product.name"
      @click="loadClickImg()"
    />
    <van-count-down :time="time" style="margin-left: 30px">
      <template #default="timeData">
        <span class="block">{{ timeData.hours }}</span>
        <span class="colon">:</span>
        <span class="block">{{ timeData.minutes }}</span>
        <span class="colon">:</span>
        <span class="block">{{ timeData.seconds }}</span>
      </template>
    </van-count-down>

    <div class="content" v-html="product.desc"></div>
    <p class="price">
      ￥<span>{{ Number(product.price).toFixed(2) }}</span
      >元
    </p>
    <div class="dian">
      <van-button type="info" size="small" @click="bian(-1)">-</van-button
      ><span>{{ amount }}</span
      ><van-button size="small" type="info" @click="bian(1)">+</van-button>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot @click="kefu" />
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        :badge="nums"
        @click="toCar"
      />
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="addCar()"
      />
      <van-goods-action-button type="danger" text="立即购买" @click="buy" />
    </van-goods-action>
  </div>
</template>

<script>
import { ImagePreview } from "vant";
import { Toast } from "vant";
import { loadProductDetailAPI } from "../services/products";
import { addToCart, loadCartsAPI } from "../services/cart";
import { isLogined } from "../utils/auth";
export default {
  data() {
    return {
      product: {},
      amount: 1, //加入购物车的数量
      nums: 0, //购物车商品数量  length
      time: Number(+new Date("2022-05-01 12:00:00")),
    };
  },
  async created() {
    console.log(this.$route.params);
    const resProduct = await loadProductDetailAPI(this.$route.params.id);
    this.product = resProduct.data;
    console.log(this.product);
    this.loadCartsLength();
  },

  methods: {
    loadClickImg() {
      ImagePreview([
        "https://img01.yzcdn.cn/vant/apple-1.jpg",
        "https://img01.yzcdn.cn/vant/apple-2.jpg",
      ]);
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    bian(num) {
      this.amount += num;
      if (this.amount < 1) {
        this.amount = 1;
      }
      console.log(this.amount);
    },
    //加入购物车  先登录
    async addCar() {
      if (isLogined()) {
        const r = await addToCart(
          this.product.id,
          this.amount,
          this.product.price
        );
        if (r.code == 1) {
          Toast.success("已加入购物车");
        } else {
          Toast.fail("加入购物车失败");
        }
        console.log(r);
        console.log(this.product);
        this.loadCartsLength();
      } else {
        this.$router.push({
          name: "Login",
        });
      }
    },
    //buy
    buy() {
      if (isLogined()) {
        this.$router.push({
          name: "Cart",
        });
      } else {
        this.$router.push({
          name: "Login",
        });
      }
    },
    //去购物车 先登录
    toCar() {
      if (isLogined()) {
        this.$router.push({
          name: "Cart",
        });
      } else {
        this.$router.push({
          name: "Login",
        });
      }
    },
    //购物车数量
    async loadCartsLength() {
      if (isLogined()) {
        const res = await loadCartsAPI();
        console.log(res);
        console.log(res.data.length);
        this.nums = res.data.length;
      }
    },
    kefu() {
      Toast.fail("暂未开通，敬请期待");
    },
  },
};
</script>

<style lang="scss" scoped>
.detail {
  padding: 20px;
  h3 {
    flex-shrink: 25px;
    color: deeppink;
  }
  img {
    margin: 10px;
  }
  .content {
    width: 70vw;
    margin: 20px auto;
  }
  .price {
    margin-left: 30px;
    span {
      color: red;
      margin: 0 5px;
    }
  }
  .dian {
    margin-left: 30px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    span {
      margin: 0 5px;
    }
  }
}

.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
}
</style>
